<template>
<h1>生产排产</h1>
  <el-button @click="handleProschedule">排产</el-button>
  <!-- 排产弹窗 -->
  <el-dialog v-model="proscheduleDialogVisabel" title="生产排查" width="80%">
    <template #header>生产排查</template>
    <template #default>
      <div style="height: 300px;border: 1px solid #ccc; border-radius: 10px">
        假装这里是工单的详情
      </div>
      <div>
        <el-tabs type="border-card" @tab-click="handleWorkflowTabClick">
          <el-tab-pane
              v-for="workflow in workflowList"
              :name="workflow.id"
              :label="workflow.workflowName">
            <el-tabs @tab-click="handleProcessTabClick">
              <el-tab-pane
                v-for="process in workflow.processes"
                :label="process.processName"
                :name="process.id"
              >
                <el-row>
                  <el-button-group>
                    <el-button>新增</el-button>
                    <el-button>修改</el-button>
                    <el-button>删除</el-button>
                  </el-button-group>
                </el-row>
                <el-row>
                 任务列表
                  <el-table
                    :data="process.taskList"
                  >
                    <el-table-column prop="id" label="#"/>
                    <el-table-column prop="name" label="#"/>
                  </el-table>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    <template #footer>
      <el-button @click="proscheduleDialogVisabel = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref,onMounted} from "vue";
// 引入我们自己申明的API
import {getWorkflowByMaterialCode} from "@/api/workflow.js";

const proscheduleDialogVisabel = ref(false);

const productionOrder=ref({
  materialCode:'MAT001', // 暂时写死
})

// 商品的工艺列表
const workflowList = ref([]);

// 当前选中的工艺编号
const currentWorkflowId = ref(undefined);
const handleProschedule = ()=>{
  // 加载对应的工单.....
  // 有了工单就有物料编码了。
  // 加载工艺列表
  getWorkflowByMaterialCode(productionOrder.value.materialCode)
      .then(res=>{
        workflowList.value = res.data;
      })
  // 弹出窗体
  proscheduleDialogVisabel.value = true;
}

// 工艺选项卡选中事件
const handleWorkflowTabClick = (panel)=>{
  // 记录当前选中的工艺
  currentWorkflowId.value = panel.props.name;
}
// 工序的tab选中触发的事件
const handleProcessTabClick = (panel)=>{
  console.log(panel)
  console.log(panel.props.name);// 工序的编号
  // 查询任务列表
  // 工具工序编号找到工序
  workflowList.value.forEach(workflow=>{
    if(workflow.id == currentWorkflowId.value){
      // 这个工艺就是当前选中的工艺
      workflow.processes.forEach(process=>{
        if(process.id == panel.props.name){
          // 找到当前工序
          // 查询当前工单中，当前工艺，当前工序的任务列表
          let tasks = [
            {id:"id" + panel.props.name ,name:panel.props.label},
            {id:"id" + panel.props.name ,name:panel.props.label},
            {id:"id" + panel.props.name ,name:panel.props.label},
            {id:"id" + panel.props.name ,name:panel.props.label}
          ]
          // 将查询的任务列表设置到process的taskList中
          process.taskList = tasks;
        }
      });
    }
  })
}
</script>

<style scoped>

</style>